<template>
	<view>
		<view class="list-item-wrapper" v-bind:id="index" :style="onlineStyle[index]" v-for="(item,index) in records" :key="index">
				<view class="list-item">
					<view>机柜条码</view>
					<view>{{item.deviceBarcode}}</view>	
				</view>
				<view class="list-item">
					<view>排产序号</view>
					<view>{{item.feedbackPlanNo}}</view>
				</view>
				<view class="list-item">
					<view>工序名称</view>
					<view>{{item.processName}}</view>
				</view>
				<view class="list-item">
					<view>工序序号</view>
					<view>{{item.feedbackProcessOrder}}</view>
				</view>
				<view class="list-item">
					<view>车间</view>
					<view>{{item.workCenter}}</view>
				</view>
				<view class="list-item">
					<view>发起人工号</view>
					<view>{{item.sponsorJobNumber}}</view>
				</view>
				<view class="list-item">
					<view>发起人姓名</view>
					<view>{{item.sponsorName}}</view>
				</view>
				<view class="list-item">
					<view>维修状态</view>
					<view>{{item.type == 0?'维修发起':item.type == 1?'维修人员已确认':'维修完成'}}</view>
				</view>
				<view class="list-item">
					<view>维修标准</view>
					<view style="max-width: 468rpx">{{item.standard?item.standard:'无'}}</view>
				</view>
				<view class="list-item">
					<view>维修内容</view>
					<view style="max-width: 468rpx">{{item.context?item.context:'无'}}</view>
				</view>
				<view class="u-flex u-row-center" v-if="item.type == 0">
					<u-button size="medium" @click="showContext(item)">确认问题</u-button>
				</view>
		</view>
		
		<u-popup v-model="offlines" mode="center" width="80%" height="400rpx" border-radius="14">
			<view class="list-items-form">
				<u-form :model="form" ref="uForm" id="form-container">
					<u-form-item label="维修内容" prop="context" :label-width="labelWidth">
						<u-input v-model="form.context" :type="type" :auto-height="autoHeight" placeholder="请输入维修内容" />
					</u-form-item>
				</u-form>
				<view class="u-flex u-row-around item-l" style="width: 90%;margin: 20rpx 0;">
					<u-button type="info" size="medium" @click="cancel">取消</u-button>
					<u-button type="success" size="medium" @click="submit">提交</u-button>
				</view>
			</view>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { updFeedbackJobNumber,findFeedback } from '../utils/index.js'
	export default {
		data() {
			return {
				labelWidth: 160,		//表单每一项的宽度
				autoHeight: true,		//表单“描述”输入框自动高度
				type: 'textarea',		//将描述的输入框设置为textarea
				rules: {						//表单提交前的验证
					context: [{
							required: true, 
							message: '请输入内容', 
							trigger: 'blur',
					}],
				},
				form: {},
				feedbackId: '',
				records: [],
				offlines: false,
				feedObj: {},
				onlineStyle: ["",""],	//状态时填充的样式
				user: uni.getStorageSync('user')
			}
		},
		methods:{
			// 表单验证
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过')
						this.postForm()
					} else {
						this.$refs.uTips.show({
							title: '请完善表单数据!',
							type: 'warning',
							duration: '2000'
						})
					}
				})
			},
			// 提交整个表单，提交按钮绑定的函数
			async postForm(val) {
				let query = Object.assign({},this.form)
				query.id = this.feedObj.id
				const { data } = await updFeedbackJobNumber(query)
				if(data.code == '1') {
					this.offlines = false
					this.$refs.uTips.show({
						title: '提交成功！',
						type: 'success',
						duration: '2000'
					})
					this.findFeedback()
				}
			},
			// 关闭弹出框
			cancel() {
				this.offlines = false
			},
			showContext(item){
				this.offlines = true
				this.feedObj = item
			},
			async findFeedback(val) {
				let query = {feedbackJobNumber: uni.getStorageSync('feedbackForm')}
				const { data } = await findFeedback(query)
				console.log(data.data)
				this.records = data.data
				for(let i = 0;i < this.records.length;i++){				//遍历records数组改变背景颜色
					this.judgeStyle(i)
				}
			},
			judgeStyle(value) {
				if(this.records[value].type == 1 || this.records[value].type == 2) {
					this.onlineStyle[value] = "background-color: #FFEFD5;"
				} else {
					this.onlineStyle[value] = "background-color: #90EE90;"
				}
			},
		},
		onLoad(option) {
			if(uni.getStorageSync('feedbackForm')){
				this.findFeedback()
			} else {
				this.$refs.uTips.show({
					title: '不是维修人员!',
					type: 'warning',
					duration: '2000'
				})
			}
			
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.main-content {
		width: 100%;
	}
	#form-container ::v-deep .u-form-item {
		margin-top: 15rpx;
		padding: 10rpx 30rpx;
	}
	.content {
		padding: 24rpx;
		text-align: center;
	}
	.buttonGap {
		margin-top: 20rpx;
	}
	.scroller {
		width: 100%;
		overflow: hidden;
	}
	.main-content ::v-deep .u-form {
		margin: 0rpx 10rpx;
		padding: 0rpx 10rpx;
	}
	// 查询按钮样式
	.checkBtn {
		display: flex;
		justify-content: center;
	}
	// 排产返回的列表信息块外层包裹器
	.list-item-wrapper {
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #FFEFD5;
	}
	// 排产返回的列表信息块的样式
	.list-item {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		margin: 10rpx 10rpx;
	}
	.nofinish{
		color: red;
	}
</style>
